<template>
  <el-dialog
    v-model="dialogVisible"
    top="10vh"
    width="750px"
    @close="closeDialog"
  >
    <el-form
      label-width="90px"
      :rules="rules"
      style="min-width: 600px; width: 600px; margin-left:35px;"
    >
      <!-- 图片 -->
      <el-form-item
        label="轮播图片"
        prop="imgUrl"
      >
        <img-upload v-model="Data.imgUrl" />
      </el-form-item>
      <!-- 平台
      <el-form-item
        label="平台"
        prop="imgType"
      >
        <el-radio
          v-model="Data.imgType"
          :label="0"
        >
          移动端
        </el-radio>
      </el-form-item>
      -->
      <!-- 状态
      <el-form-item
        label="状态"
        prop="status"
      >
        <el-radio
          v-model="Data.status"
          :label="0"
        >
          禁用
        </el-radio>
        <el-radio
          v-model="Data.status"
          :label="1"
        >
          启用
        </el-radio>
      </el-form-item>
      -->
      <!-- 排序
      <el-form-item
        label="排序"
        prop="seq"
      >
        <el-input-number
          v-model="Data.seq"
          :min="0"
          controls-position="right"
          :precision="0"
        />
      </el-form-item>
      -->
      <el-form-item
        label="类型"
        prop="imgType"
      >
        <el-select
          v-model="Data.imgType"
          placeholder="选择"
          style="width: 240px"
          @change="test"
        >
          <el-option
            label="主页"
            value="0"
          />
          <el-option
            label="商城"
            value="1"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="链接到"
        prop="linkUrl"
      >
        <el-cascader
          v-if="linkOptionBox"
          v-model="preLinkUrl"
          placeholder="输入搜索或选择"
          style="width: 50%"
          :options="options"
          filterable
          clearable
          @change="pushOption(preLinkUrl)"
        />
        <el-input
          v-else
          v-model="preLinkUrlInput"
          placeholder="输入ID(先选择类型)"
          type="number"
          style="width: 50%"
          :disabled="!isLinkUrlSelect"
          @change="pushOption(preLinkUrlInput)"
        >
          <template #prepend>
            <el-select
              v-model="linkUrlSelect"
              placeholder="类型"
              style="width: 6em"
              @change="selectOption"
            >
              <el-option
                label="帖子"
                value="1"
              />
              <el-option
                label="商品"
                value="2"
              />
            </el-select>
          </template>
        </el-input>
        <el-button
          type="primary"
          icon="EditPen"
          style="margin-left: 1ch"
          circle
          @click="switchLinkOptionBox"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="createIndexImg">
        创建
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import * as api from '@/api/platform/index-img'
import * as boardApi from '@/api/point/board'
import * as spuApi from '@/api/product/search.js'
import * as postApi from '@/api/platform/post.js'

const emit = defineEmits(['close'])

const prop = defineProps({
  addOrUpdateVisible: Boolean
})
const dialogVisible = ref(prop.addOrUpdateVisible)
watch(() => prop.addOrUpdateVisible, (val) => {
  dialogVisible.value = val
})

const linkUrlSelect = ref()
const isLinkUrlSelect = ref(false)
// true 为选择列表，false为自己输入
const linkOptionBox = ref(true)
function switchLinkOptionBox () {
  linkOptionBox.value = !linkOptionBox.value
}
const preLinkUrlInput = ref()
const preLinkUrl = ref(null)
function pushOption (data) {
  if (data !== null) {
    if (linkOptionBox.value == true) {
      Data.linkUrl = `${data[0]}${data[1]}`
      // console.log(Data.linkUrl)
    } else if (linkUrlSelect.value == 1) {
      Data.linkUrl = `post://${data}`
    } else if (linkUrlSelect.value == 2) {
      Data.linkUrl = `product://${data}`
    } else {
      ElMessage.error('错误发生在pushOption，没有匹配到分支')
    }
    // console.log(linkUrlSelect.value + '然后是' + Data.linkUrl)
  }
}
function selectOption () {
  isLinkUrlSelect.value = true
  // console.log('选了')
}
// linkUrl字段
const options = ref([
  {
    value: 'activitySection://',
    label: '活动板块',
    children: [
      {
        value: null,
        label: '没有'
      }
    ]
  },
  {
    value: 'communitySection://',
    label: '粉丝社区板块',
    children: [
      {
        value: null,
        label: '没有'
      }
    ]
  },
  {
    value: 'post://',
    label: '帖子',
    children: [
      {
        value: null,
        label: '没有'
      }
    ]
  },
  {
    value: 'product://',
    label: '商品',
    children: [
      {
        value: null,
        label: '没有'
      }
    ]
  }
])
const rules = reactive({
  imgType: [
    { required: true, message: '需要选择类型', trigger: 'blur' }
  ]
})

// 获取options
function getOptions () {
  boardApi.getBoard({
    type: 0
  }).then((res) => {
    options.value[0].children = res.map(item => ({
      label: item.name,
      value: item.sectionId
    }))
  })
  // 获取粉丝圈板块
  boardApi.getBoard({
    type: 1
  }).then((res) => {
    options.value[1].children = res.map(item => ({
      label: item.name,
      value: item.sectionId
    }))
  })
  // 获取前50个帖子
  postApi.getPost({
    pageSize: 50,
    pageNum: 1
  }).then((res) => {
    options.value[2].children = res.list.map(item => ({
      label: item.title ? item.title : '这个帖子没有标题',
      value: item.postId
    }))
    // console.log(res.list)
  })
  // 获取前50个商品
  spuApi.page({
    pageSize: 50,
    pageNum: 1
  }).then((res) => {
    options.value[3].children = res.list[0].spus.map(item => ({
      label: item.spuName,
      value: item.spuId
    }))
    // console.log(res.list[0].spus)
  })
}

const Data = reactive({
  imgUrl: '/2024/04/09/ae9be89e7f6146b1bd309bc20c69663b',
  status: 1,
  seq: 0,
  // TODO: 主页和商城轮播图选择与显示列表
  imgType: null,
  linkUrl: null
})
function closeDialog () {
  emit('close', true)
}
function createIndexImg () {
  if (Data.imgType !== null) {
    api.addIndexImg(Data)
      .then(() => {
        ElMessage.success('创建成功')
        emit('close', true)
      })
      .catch(() => {
        ElMessage.error('创建失败')
      })
  } else {
    ElMessage.error('需要选择类型')
  }
}

onMounted(() => {
  getOptions()
})

</script>
